<template>
  <div class="foot">
    <!-- 选项卡开始 -->
    <van-tabs v-model="activeName">
      <van-tab title="精选" name="a">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="item in datalist" :key="item.id">
              <div class="prc">
                <span>{{ item.title }}</span>
                <img v-lazy="item.image" alt="" />
              </div>
              <img v-lazy="item.name" alt="" class="ig" />
              <span class="user">{{ item.user_name }}</span>
              <van-rate v-model="value" icon="like" void-icon="like-o" />
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="视频" name="b">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="item in datalist" :key="item.id">
              <div class="prc">
                <span>{{ item.title }}</span>
                <img v-lazy="item.image" alt="" />
              </div>
              <img v-lazy="item.name" alt="" class="ig" />
              <span class="user">{{ item.user_name }}</span>
              <van-rate v-model="value" icon="like" void-icon="like-o" />
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="最新" name="c"
        ><van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="item in datalist" :key="item.id">
              <div class="prc">
                <span>{{ item.title }}</span>
                <img v-lazy="item.image" alt=""/>
              </div>
              <img v-lazy="item.name" alt="" class="ig" />
              <span class="user">{{ item.user_name }}</span>
              <van-rate v-model="value" icon="like" void-icon="like-o" />
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <!-- 选项卡结束 -->
  </div>
</template>
<script>
import Vue from "vue";
import { GridItem, Lazyload } from "vant"; //图片实现懒加载
Vue.use(Lazyload);
export default {
  data() {
    return {
      value:1,
      activeName: "b",
      current: 1, //记录第几页
      // total: 0, //记录全部的数据
      datalist: [],
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
    }; 
  },
  methods: {
    onLoad(cid, current) {
      /**
       * 1.axios请求页面
       * 2.合并新数据到老数据下面
       * 3.让this.loading=false
       * 4.判断请求到的所有，数据是否等于总数，停止加载，给this.finished=true
       */
      // let object = {
      //   cid: cid,
      //   current: current,
      // };
      // if(this.data.results.length===this.total){
      //   this.finished=true;
      //   return;
      // }
      this.current++;
      // 异步更新数据
      // setTimeout真实场景中一般为 ajax 请求
      setTimeout(() => {
        this.axios.get("/index").then((res) => {
          let data = res.data.results;
          data.forEach((item) => {
            item.name = require("../assets/portrait/" + item.image); //用户头像
            item.image = require("../assets/image/" + item.user_portrait); //菜谱图片
            this.datalist.push(item);
          });
        });
        if (this.refreshing) {
          this.datalist = []; //清空数据
          this.refreshing = false; //停止加载
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.datalist.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>
<style scoped>
.food img {
  width: 50%;
}
.ig {
  width: 60px;
  height: 60px;
  margin-top: 15px;
}
</style>